<!DOCTYPE html>
<#import "/spring.ftl" as spring />
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/bootstrap3/bootstrap.min.css'/>">
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/bootstrap3/bootstrap-theme.min.css'/>">
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/bootstrap3/bootstrapTable/bootstrap-table.min.css'/>">
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/css/mycss.css'/>">
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/jPlayer-2.9.2/skin/blue.monday/css/jplayer.blue.monday.min.css'/>">
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/jPlayer-2.9.2/skin/blue.monday/css/jplayer.blue.monday.min.css'/>">
    <style>
        .audio {
            border: 1px solid #29b310;
            border-radius: 5px;
            padding: 3px;
            width: 175px;
            overflow: hidden;
        }
        .couCoverImage{
            width: 60px;
            height: auto;
            cursor: pointer;
        }
    </style>
    <title>TPO</title>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">TPO Admin</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="<@spring.url '/admin/category/list'/>">分类</a></li>
                    <li class="active"><a href="<@spring.url '/admin/article/list'/>">文章</a></li>
                    <li><a href="<@spring.url '/admin/user'/>">用户</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>

    <div class="container-fluid">
        <div id="toolbar">
            <div class="form-inline" role="form">
                <div class="form-group">
                    <span>分类：</span>
                    <select class="form-control" name="categoryId" id="categoryId">
                        <option value=""> All </option>
                        <#list categoryList as category>
                            <option value="${category.id}">[${category.id}] ${category.name_cn!}</option>
                        </#list>
                    </select>
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" style="width: 400px" id="search_param" placeholder="搜索">
                </div>

                <button id="ok" type="submit" class="btn btn-default">Search</button>

                <a type="button" target="_blank" class="btn btn-primary " href="/tpo/admin/article/edit"> 添加文章 </a>
            </div>
        </div>
        <table class="table table-inverse table-hover"
               id="dataTable"
               data-toggle="table"
               data-url="/tpo/admin/article/list/data"
               data-method="post"
               data-content-type="application/x-www-form-urlencoded"
               data-height="780"
               data-side-pagination="server"
               data-pagination="true"
               data-page-list="[ 20, 50, 100, 200]"
               data-page-size="50"
               data-page-number="1"
               data-toolbar="#toolbar"
               data-show-refresh="true"
               data-show-toggle="true"
               data-sort-order="ASC"
               data-sort-name="id">
        </table>
    </div>

    <!-- Modal -->
    <div class="modal fade bs-example-modal-lg" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content" style="    width: 700px !important;">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player">
                        <div class="jp-type-single">
                            <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                            <div class="jp-gui">
                                <div class="jp-video-play">
                                    <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
                                </div>
                                <div class="jp-interface">
                                    <div class="jp-progress">
                                        <div class="jp-seek-bar">
                                            <div class="jp-play-bar"></div>
                                        </div>
                                    </div>
                                    <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                                    <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                                    <div class="jp-controls-holder">
                                        <div class="jp-controls">
                                            <button class="jp-play" role="button" tabindex="0">play</button>
                                            <button class="jp-stop" role="button" tabindex="0">stop</button>
                                        </div>
                                        <div class="jp-volume-controls">
                                            <button class="jp-mute" role="button" tabindex="0">mute</button>
                                            <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                                            <div class="jp-volume-bar">
                                                <div class="jp-volume-bar-value"></div>
                                            </div>
                                        </div>
                                        <div class="jp-toggles">
                                            <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                                            <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
                                        </div>
                                    </div>
                                    <div class="jp-details">
                                        <div class="jp-title" aria-label="title">&nbsp;</div>
                                    </div>
                                </div>
                            </div>
                            <div class="jp-no-solution">
                                <span>Update Required</span>
                                To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="<@spring.url '/admin/js/jquery-3.2.1.min.js'/>"></script>
    <script src="<@spring.url '/admin/bootstrap3/bootstrap.min.js'/>"></script>
    <script src="<@spring.url '/admin/js/popper.min.js'/>"></script>
    <script src="<@spring.url '/admin/bootstrap3/bootstrapTable/bootstrap-table.js'/>"></script>
    <script src="<@spring.url '/admin/bootstrap3/bootstrapTable/bootstrap-table-zh-CN.min.js'/>"></script>
    <script src="<@spring.url '/admin/bootstrap3/bootstrapTable/bootstrap-table-editable.js'/>"></script>
    <script src="<@spring.url '/admin/bootstrap3/bootstrap3-editable/js/bootstrap-editable.js'/>"></script>
    <script src="<@spring.url '/admin/jPlayer-2.9.2/jplayer/jquery.jplayer.js'/>"></script>
    <script src="<@spring.url '/admin/jPlayer-2.9.2/popcorn/popcorn.js'/>" type="text/javascript" ></script>
    <script src="<@spring.url '/admin/jPlayer-2.9.2/popcorn/popcorn.player.js'/>" type="text/javascript" ></script>
    <script src="<@spring.url '/admin/jPlayer-2.9.2/popcorn/popcorn.jplayer.js'/>" type="text/javascript" ></script>
<script>
    function showVideoModel(obj) {
        var video_url= $(obj).attr("data-video-url");
        var cou_image_url= $(obj).attr("data-image-url");
        console.log(video_url);
        console.log(cou_image_url);
        $("#jquery_jplayer_1").jPlayer({
            ready: function () {
                $(this).jPlayer("setMedia", {
                    m4v: video_url,
                    poster: cou_image_url
                });
            },
            swfPath: "<@spring.url '/admin/jPlayer-2.9.2/jplayer'/>",
            supplied: "webmv, ogv, m4v",
            size: {
                width: "640px",
                height: "360px",
                cssClass: "jp-video-360p"
            },
            useStateClassSkin: true,
            autoBlur: false,
            smoothPlayBar: true,
            keyEnabled: true,
            remainingDuration: true,
            toggleDuration: true
        });

        $('#videoModal').modal('show');
    }
    $('#videoModal').on('hidden.bs.modal', function (e) {
        $("#jquery_jplayer_1").jPlayer("destroy");
        console.log("destroy");
    });

    var $table = $('#dataTable').bootstrapTable({
        queryParams: function (params) {
            var params = {};
            $('#toolbar').find('input[name]').each(function () {
                params[$(this).attr('name')] = $(this).val();
                console.log($(this).attr('name') +":" +$(this).val());
            });

            var search_param = $("#search_param").val();
            params['search'] = search_param;
            params[$("#categoryId").attr('name')] = $("#categoryId").val();
            params['rows'] = this.pageSize;
            params['offset'] = (this.pageNumber-1) * this.pageSize;
            params['sort'] = this.sortName;
            params['order'] = this.sortOrder;
            console.log(JSON.stringify(params));
            return params;
        },
        //表格的列
        columns: [
            {
                field: 'id',//域值
                title: 'id',//内容
                visible: true,//false表示不显示
                sortable: true//启用排序
            },
            {
                field: 'tpo_name',//域值
                title: 'tpo_name',//内容
                visible: true,//false表示不显示
                sortable: false//启用排序
            },
            {
                field: 'categoryId',//域值
                title: 'categoryId',//内容
                visible: true,//false表示不显示
                sortable: false//启用排序
            },
            {
                field: 'order',//域值
                title: 'order',//内容
                visible: true,//false表示不显示
                sortable: false//启用排序
            },
            {
                field: 'nameCn',//域值
                title: 'nameCn',//内容
                visible: true,//false表示不显示
                sortable: false//启用排序
            },
            {
                field: 'nameEn',//域值
                title: 'nameEn',//内容
                visible: true,//false表示不显示
                sortable: false//启用排序
            },
            {
                field: 'audioUrl',//域值
                title: '音频',//内容
                visible: true,//false表示不显示
                sortable: false,//启用排序
                formatter : function (value, row, index) {
                    var audioUrl =  row["audioUrl"];
                    if(audioUrl==null || audioUrl==''){
                        return "无音频";
                    }else{
                        return '<div class="audio"><audio controls><source src="'+audioUrl+'" >不支持音频格式</audio></div>';
                    }
                }
            },
            {
                field: 'coverUrl',//域值
                title: '封面图片',//内容
                visible: true,//false表示不显示
                sortable: false,//启用排序
                formatter : function (value, row, index) {
                    var cou_image_url =  row["coverUrl"];
                    if(cou_image_url==null || cou_image_url==''){
                        return "无图片"
                    }else{
                        return '<img src="'+cou_image_url+'" class="couCoverImage" />';
                    }
                }
            },
            {
                field: 'review_image_url',//域值
                title: '内容回顾图片',//内容
                visible: true,//false表示不显示
                sortable: false,//启用排序
                formatter : function (value, row, index) {
                    var review_image_url =  row["review_image_url"];
                    if(review_image_url==null || review_image_url==''){
                        return "无图片"
                    }else{
                        return '<img src="'+review_image_url+'" class="couCoverImage" />';
                    }
                }
            },
            {
                field: 'video_url',//域值
                title: '视频',//内容
                visible: true,//false表示不显示
                sortable: false,//启用排序
                formatter : function (value, row, index) {
                    var cou_image_url =  row["coverUrl"];
                    var video_url =  row["video_url"];
                    if(video_url==null || video_url==''){
                        return "无视频";
                    }else{
                        return '<button type="button" data-video-url="'+video_url+'" data-image-url="'+cou_image_url+'" class="btn btn-default" onclick="showVideoModel(this)">播放视频</button>';
                    }
                }
            },
            {
                title: '操作',//内容
                visible: true,//false表示不显示
                sortable: false,//启用排序
                formatter : function (value, row, index) {
                    var id =  row["id"];;
                    return '<a class="btn btn-link" href="/tpo/admin/article/edit?id='+id+'" target="_blank" >编辑</a> ' +
                        '<button type="button" class="btn btn-danger" onclick="deleteArticle('+id+')" >删除</button> ' +
                        '<a class="btn btn-link" href="/tpo/admin/article/'+id+'/question" target="_blank" >题目管理</a> ' +
                        '<a class="btn btn-link" href="/tpo/admin/article/'+id+'/vocabulary" target="_blank" >单词管理</a> ' +
                        '<a class="btn btn-link" href="/tpo/admin/article/'+id+'/sentencePattern" target="_blank" >句型管理</a> '
                }
            }
        ]
    });

    $ok = $('#ok');
    $(function () {
        $ok.click(function () {
            $table.bootstrapTable('refresh');
        });

        $("#categoryId").change(function () {
            $table.bootstrapTable('refresh');
        });
    });

    function deleteArticle(id) {
        if(confirm("警告：确定要删除吗?（删除后数据不可恢复） id="+id)){
            $.ajax({
                type: "post",
                url: "/tpo/admin/article/delete/"+id,
                success: function (data, status) {
                    if (data.status == 200) {
                        alert('成功!');
                        $table.bootstrapTable('refresh');
                    }else{
                        alert(data.message);
                    }
                },
                error: function () {
                    alert('失败???!!!');
                }
            });
        }
    }

</script>
</body>
</html>